{if $init}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>{$title}</title>
	<script type="text/javascript" src="{ $path }/includes/js/jquery.js" load="lightbox"></script>
	<script type="text/javascript" src="{ $path }/includes/js/coverflow/contentflow.js" load="lightbox"></script>
	<script>
	{literal}
	var cf = new ContentFlow('contentFlow', { reflectionColor: "#FFFFFF",circularFlow: false, flowSpeedFactor: 3, startItem: 0});
	
	function loadInfo(inode,part){
		$.get("index.php?plugin=imagePlugin", {action: 'info', 'inode': inode, 'part': part}, function(msg){ 
			var inf = parent.document.getElementById('information');
			$(inf).html(msg);
			return 1;
		});
	}
	
	$(window).bind('load', function(){
	{/literal}
		var preload = [
		{foreach name=i key=part item=i from=$images}
				{foreach name=img item=img from=$i}
					{literal}{{/literal}'name':'{$img.name}','inode':'{$img.inode}','alloc':'{$img.alloc}','part':'{$part}'{literal}}{/literal},
			{/foreach}
		{/foreach}
        ];
	{literal}
		var ind=1;
		var last='';
		$(document.createElement('img')).bind('load', function(){
       		if (this.src){
				var oDiv = document.createElement('div');
				oDiv.className = 'item';
				var cDiv = document.createElement('div');
				cDiv.className = 'caption';
				$(cDiv).html('<div onclick="loadInfo(\''+last.inode+'\',\''+last.part+'\');">'+last.name+' <img src="images/info.png"/></div>'+last.part+'<br/><label class="'+last.alloc+'">'+last.alloc+'</label>');
				$(oDiv).append($(this));
				$(oDiv).append($(cDiv));
				var t = cf.addItem(oDiv, ind);
				ind++;
			} 
       		// Inicializamos la primera
       		if (preload[0]){
	       		last = preload.shift();
	       		this.src = 'index.php?plugin=imagePlugin&action=getImage&part='+last.part+'&inode='+last.inode+'&thumb=1';
	       		this.className = 'content';
	       		$(this).attr('href','index.php?plugin=imagePlugin&action=getImage&part='+last.part+'&inode='+last.inode);
       		}  else {
				// Borramos el de loading
				var ini=cf.getNumberOfItems()-8;
				var fin=cf.getNumberOfItems();
				for (var loop=ini;loop<fin;loop=loop+1){
					cf.rmItem(loop);
				}
				cf.rmItem(0);
       		}
				
		}).trigger('load');
	});

	{/literal}
	var base="{$base}";
	</script>
</head>
<body>
	<div id="contentFlow" class="ContentFlow" useAddOns="lightbox">
        <div class="loadIndicator"><div class="indicator"></div></div>

        <div class="flow">
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
				<div class="item"><img class="content" src="{ $path }/images/loader.gif" /><div class="caption" style ="color:#000;">Loading...</div></div>
        </div>
        
        <div class="globalCaption"></div>
        <div class="scrollbar">
			<div class="preButton"></div>
			<div class="nextButton"></div>
            <div class="slider"><div class="position"></div></div>
        </div>

    </div>
</body>
</html>
{/if}
